# Rspress Plugin

:::info Note
Requires [Rspress version 2.0.0-beta.16](https://v2.rspress.rs/plugin/system/introduction) or higher.
:::

Helps users build and consume {props.name || 'Module Federation'} products in **Rspress**.

## Quick Start

{props.demo}

### Installation

You can install the plugin with the following command:

import InstallKit from '@components/common/install-kit';

<InstallKit
  pkgName={props.pkgName || '@module-federation/rspress-plugin'}
/>

### Create {props.configName || 'module-federation.config.ts'}

Create the {props.configName || 'module-federation.config.ts'} file with the following content:

import CreateConfig from '@components/common/rspress/create-config';

{props.createConfig || <CreateConfig />}

### Register Plugin

import RegisterPlugin from '@components/common/rspress/register-plugin';
import React from 'react';

{props.registerPlugin || React.createElement(RegisterPlugin)}

### Loading Document Fragments

You can directly load exported document fragments in your `mdx` files.

```mdx title='docs/en/guide/intro.mdx'
import Intro from 'mf-doc/intro-zh';

{/* Document fragments support passing parameters, which are consumed as props. */}
<Intro cmdTools={['a','b']} />
```

Document fragments support passing parameters, which are consumed as props.

If you need to use the `cmdTools` variable in a document fragment, you can refer to the following:

```mdx title='docs/zh/guide/intro.mdx'
{(props.cmdTools || ['pkg-a', 'pkg-b']).map(cmdTool=>(<code>{cmdTool}</code>))}
```

## Configuration

* Type:

import ConfigType from '@components/common/rspress/config-type';

{props.configType || <ConfigType />}

### {props.pluginOptionName || 'moduleFederationOptions'}

[{props.name || 'Module Federation'} Configuration](../../configure/index)

### rspressOptions

Additional configuration for the Rspress plugin.

#### autoShared

* Type: `boolean`
* Default: `true`

Rspress uses `react`, `react-dom`, and `@mdx-js/react` as third-party dependencies. These three dependencies need to be singletons, so the `shared` configuration is automatically injected during the build.

You can also set `autoShared: false` to disable this behavior.

Default `shared` configuration: as follows:

```json
  react: {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
  },
  'react/': {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom/': {
    singleton: true,
    requiredVersion: false,
  },
  '@mdx-js/react': {
    singleton: true,
    requiredVersion: false
  },
  '@rspress/runtime': {
    singleton: true,
    requiredVersion: false
  }
```

#### rebuildSearchIndex

* Type: `boolean`
* Default: `true`

Rspress automatically generates a search index during the build, but the generation process only supports `.mdx` or `.md` files. Therefore, when a Module Federation document fragment is loaded, it will not be searchable.

To avoid this, the MF Rspress Plugin will regenerate the search index based on the rendered `html` after SSG is complete to support the search function.

If you are using remoteSearch or other search functions, you can set `rebuildSearchIndex: false` to disable this behavior.

> Note: This feature is only effective in ssg mode.

## FAQ

### Does it support local search?

Only `ssg` mode is supported. For details, refer to [rebuildSearchIndex](#rebuildsearchindex).

### Could not parse expression with swc: Expression expected"

When referencing an MDX component, you may encounter the following error:

```bash
File: "/root/docs/zh/guide/basic/mf.mdx"
Error: "23:8: Could not parse expression with swc: Expression expected"
```

This is an issue where Rspress fails to parse the expression correctly when parsing the MDX component. It can be resolved as follows:

```diff
import RemoteIntroDoc from 'mf-doc/intro';
import Head from '@components/Head';
+ import React from 'react';

- <RemoteIntroDoc head={<Head />} />
+ <RemoteIntroDoc head={React.createElement(Head)}/>

```
